<template>
  <div class="yingmoo-store">
    <ul class="nav">
      <router-link tag="li" to="">媒体管理</router-link>
      <router-link tag="li" to="/ymMemberstorecomboaddsubmit">套餐管理</router-link>
      <router-link tag="li" to="/ymMembermysubmitactivity">我的活动</router-link>
      <router-link tag="li" to="/ymMembersubmitmycase">我的案例</router-link>
      <router-link tag="div" to="/ymMemberstoretube" class="uploading">上传媒体</router-link>
    </ul>
    <div class="items">
      <p>媒体分类
        <span v-for="cate in mediaCate" :value="cate.value" @mouseenter="getCateList(cate.value)">{{cate.text}}</span>
      </p>
      <div class="suspend" v-if="mediaCate2 != null">
        <p v-for="cate2 in mediaCate2" :value="cate2.value">{{cate2.text}}</p>
      </div>
      <p>媒体状态
        <span>全部</span>
        <span>已发布</span>
        <span>未发布</span>
        <span>审核未通过</span>
      </p>
      <div class="data">
        <p>档期闲置</p>
        <input type="text" placeholder="默认服务器当前日期" />
      </div>
    </div>
<!--  订单列表  -->
    <div class="indent-list">
      <ul class="indent-head">
        <li>媒体详情</li>
        <li>刊例价</li>
        <li>折扣价</li>
        <li>数量</li>
        <li>周期</li>
      </ul>
      <!--<div>
        <div class="indent-odd" v-for='text in text'>
          <div class="one">
            <div class="one-div">
              <input type="checkbox" id="indent" />
              <label for="indent"><img src="../assets/ym-member/img.png" /></label>
            </div>
            <div class="two-div">
              <h1>{{text.textheadline}}</h1>
              <p>{{text.texttype}}<span>{{text.textfrom}}</span></p>
              <p>{{text.textlocation}}<span>{{text.textplace}}</span></p>
              <p>{{text.textname}}</p>
            </div>
          </div>
          <div class="two">
            <p>{{text.textsize}}</p>
          </div>
          <div class="three">
            <p>{{text.textdeadline}}</p>
          </div>
          <div class="for">
            <p>{{text.textoriginal}}</p>
          </div>
          <div class="five">
            <p>{{text.textstate}}</p>
          </div>
        </div>
      </div>-->
      <div>
        <div class="indent-odd" v-for='media in mediaList'>
          <div class="one">
            <div class="one-div">
              <input type="checkbox" id="indent" name="check" @change="getNum" :value="media.mediaId"/>
              <label for="indent"><img width="180px" height="117px" :src="media.cover" /></label>
            </div>
            <div class="two-div">
              <h1>{{media.mediaName}}</h1>
              <p><span>{{media.mediaName}}</span></p>
              <p>{{media.mediaCompanyName}}</p>
              <!--<p>{{text.textname}}</p>-->
            </div>
          </div>
          <div class="two">
            <p>{{media.prices}}{{media.lightStyleId}}</p>
          </div>
          <div class="three">
            <p>{{media.minimumPrice}}{{media.lightStyleId}}</p>
          </div>
          <div class="for">
            <p>{{media.panelNum}}</p>
          </div>
          <div class="five">
            <p>{{media.minCycle}}</p>
          </div>
        </div>
      </div>
    </div>
    <ul class="last">
      <li>
        <input type="checkbox" id="over" @change="selectAll(),getNum()"/>
        <label for="over">全选</label>
      </li>
      <li>生成PPT</li>
      <li @click="deletebatch">删除</li>
      <li>编辑</li>
      <li>档期</li>
      <li>发布</li>
      <li>取消发布</li>
      <li>已选<span>{{sum}}</span>个媒体</li>
    </ul>
    <!--  分页器  -->
    <div class="paging">
      <el-pagination
        :page-size="10"
        background
        layout="prev, pager, next, jumper"
        :total="100">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name: "yingmoo-store",
    data() {
      return {
      	requestAddr:this.GLOBAL.addr,
        shos: 0,
        mediaList:[],
        mediaCate:[],
        mediaCate2:null,
        sum:0,
        text: [{
          textheadline: '媒体标题媒体标题媒体标题',
          texttype: '机场媒体',
          textfrom: '灯箱',
          textlocation: '北京',
          textplace: '海淀区',
          textname: '媒体主公司名称',
          textsize: '1345 元/天',
          textdeadline: '1105 元/天',
          textoriginal: '2',
          textstate: '天'
        }, {
          textheadline: '媒体标题媒体标题媒体标题',
          texttype: '机场媒体',
          textfrom: '灯箱',
          textlocation: '北京',
          textplace: '海淀区',
          textname: '媒体主公司名称',
          textsize: '1345 元/天',
          textdeadline: '1105 元/天',
          textoriginal: '2',
          textstate: '天'
        }]
      }
    },
    mounted(){
	  	this.getMediaInfo();
	  	this.getCateList('');
	  },
	  methods:{
	  	getMediaInfo:function(){
	  		this.user = JSON.parse(localStorage.getItem("user"));
	  		this.$http.post(this.requestAddr+"/GetJson/getMediaInfo",this.user,{emulateJSON:true}).then(
	  			(res)=>{
	  				if(res.data.code == 0){
	  					this.mediaList = res.data.mediaList;
	  					console.log(this.mediaList);
	  				}
	  			}
	  		)
	  	},
	  	//获取分类信息
    	getCateList:function(code){
    		this.$http.post(this.requestAddr+"/GetJson/getCategoryList",{"parentCode":code},{emulateJSON: true}).then(
    			(res)=>{
    				if(code == null || code == ''){
						this.mediaCate = res.data.result;	
						this.mediaCate.splice(7,1);//移除“LED媒体”
					}else if(code != null && code.length == 4){
						this.mediaCate2 = res.data.result;								
					}
    			}
    		)
    	},
    	//获取选中的数据条数
			getNum:function(){
				var selectNum = 0;
				var options = document.getElementsByName("check");
				for (var i=0; i<options.length;i++) {
					if(options[i].checked == true){
						selectNum += 1;
					}
				}
				this.sum = selectNum;
			},
			//全选
			selectAll:function(){
				var selAll = document.getElementById("over");
				var options = document.getElementsByName("check");
				for(var i = 0; i<options.length; i++){
					options[i].checked = selAll.checked;
				}
			},
    	multSelect:function(){
				var options = document.getElementsByName("check");
				var medias = new Array();
				var index = 0;
				for (var i = 0; i<options.length;i++) {
					if(options[i].checked == true){
						medias[index] = options[i].value;
						index++;
					}
				}
				return medias;
			},
			//批量删除选中的数据
			deletebatch:function(){
				var mediaIds = this.multSelect();
				if(mediaIds.length == 0){
					this.$message({
	          message: '请先选中需要删除的商品！',
	          type: 'warning'
	        });
					return;	
				}
				this.$confirm('确认选中的商品吗？', '删除提示', {
			      confirmButtonText: '确定',
			      cancelButtonText: '取消',
			      type: 'warning' 
				}).then(
					()=>{
						this.$http.post(this.requestAddr+"/GetJson/MemberShop/deleteMediaBatch",{"mediaIds":JSON.stringify(mediaIds)},{emulateJSON:true}).then(
							(res)=>{
								console.log(res.data);
								this.getMediaInfo();
							}
						)
					}
				)
			}
	  }
  }

</script>

<style scoped lang="less">
  .yingmoo-store {
    width: 100%;
    .nav {
      width: 1200px;
      height: 46px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      background-color: #f2f2f2;
      margin-top: 20px;
      li {
        list-style: none;
        width: 90px;
        height: 30px;
        margin: 0 20px;
        line-height: 30px;
        color: #666666;
        text-align: center;
        font-size: 16px;
        cursor: pointer;
        &:hover {
          background-color: #036eb7;
          color: white;
        }
        &:nth-child(1) {
          background-color: #036eb7;
          color: white;
        }
      }
      .uploading {
        width: 103px;
        height: 30px;
        font-size: 16px;
        line-height: 30px;
        color: white;
        background-color: #f29600;
        text-align: center;
        border-radius: 7px;
        margin-left: 560px;
        cursor: pointer;
      }
    }
    .items {
      width: 1200px;
      margin: 0 auto;
      background-color: white;
      p {
        padding-left: 27px;
        font-size: 14px;
        color: #333333;
        font-weight: bold;
        padding-top: 32px;
        span {
          margin-left: 25px;
          font-weight: 100;
          color: #747474;
          cursor: pointer;
          &:hover {
            color: #f29600;
          }
        }
        &:nth-child(3) {
          padding-top: 24px;
        }
      }
      .suspend {
        width: 835px;
        height: 50px;
        margin-top: 10px;
        margin-left: 85px;
        p {
          float: left;
          padding-left: 25px;
          text-align: left;
          padding-top: 0;
          line-height: 25px;
          color: #747474;
          font-weight: 100;
          cursor: pointer;  
          &:hover{
            color: #f29600;
          }
        }
      }
      .data {
        display: flex;
        padding-bottom: 20px;
        input {
          width: 220px;
          height: 37px;
          margin-top: 20px;
          font-size: 14px;
          color: #999999;
          border: 1px solid #dddddd;
          margin-left: 14px;
          padding-left: 10px;
          outline: none;
          border-radius: 3px;
        }
      }
    }

    .indent-list {
      width: 1200px;
      margin: 0 auto;
      background-color: white;
      .indent-head {
        width: 1200px;
        height: 42px;
        font-size: 16px;
        display: flex;
        background-color: #f2f2f2;
        li {
          text-align: center;
          line-height: 42px;
          color: #666666;
          &:nth-child(1) {
            width: 585px;
          }
          &:nth-child(2) {
            width: 180px;
          }
          &:nth-child(3) {
            width: 155px;
          }
          &:nth-child(4) {
            width: 130px;
          }
          &:nth-child(5) {
            width: 150px;
          }
        }
      }
      .indent-num {
        display: flex;
        justify-content: space-between;
        padding-left: 22px;
        padding-right: 33px;
        font-size: 14px;
        line-height: 42px;
        border-bottom: 2px solid #1578bc;
        li {
          &:nth-child(2) {
            color: #999999;
            cursor: pointer;
            &:hover {
              color: #f39e26;
            }
          }
        }
      }
      .indent-odd {
        display: flex;
        height: 142px;
        border-bottom: 1px solid #f2f2f2;
        .one {
          width: 585px;
          display: flex;
          align-items: center;
          background-image: url(../assets/ym-member/cut-off-rule.png);
          background-repeat: no-repeat;
          background-position: right;
          .one-div {
            display: flex;
            align-items: center;
            input {
              margin-left: 25px;
            }
            label {
              margin-left: 10px;
            }
          }
          .two-div {
            width: 185px;
            font-size: 14px;
            line-height: 32px;
            padding-left: 30px;
            h1 {
              font-weight: bold;
              margin-top: 10px;
            }
            p {
              color: #999999;
            }
          }
        }
        .two {
          width: 180px;
          line-height: 142px;
          background-image: url(../assets/ym-member/cut-off-rule.png);
          background-repeat: no-repeat;
          background-position: right;
          p {
            color: #999999;
            font-size: 14px;
            text-align: center;
          }
        }
        .three {
          width: 155px;
          line-height: 142px;
          background-image: url(../assets/ym-member/cut-off-rule.png);
          background-repeat: no-repeat;
          background-position: right;
          p {
            color: #999999;
            font-size: 14px;
            text-align: center;
          }
        }
        .for {
          width: 130px;
          line-height: 142px;
          background-image: url(../assets/ym-member/cut-off-rule.png);
          background-repeat: no-repeat;
          background-position: right;
          p {
            color: #999999;
            font-size: 14px;
            text-align: center;
          }
        }
        .five {
          width: 150px;
          text-align: center;
          line-height: 142px;
          p {
            color: #999999;
            font-size: 14px;
            text-align: center;
          }
        }
      }
    }
    .last {
      width: 1200px;
      height: 46px;
      background-color: #f2f2f2;
      line-height: 46px;
      margin: 0 auto;
      display: flex;
      li {
        font-size: 14px;
        color: #666666;
        margin-left: 30px;
        padding-left: 20px;
        cursor: pointer;
        &:nth-child(1) {
          margin-left: 22px;
          padding-left: 0;
        }
        &:nth-child(2) {
          background-image: url(../assets/ym-member/shop/LOGO1.png);
          background-repeat: no-repeat;
          background-position: left;
          &:hover{
            background-image: url(../assets/ym-member/shop/LOGO-hover1.png);
            color: #f29600;
          }
        }
        &:nth-child(3) {
          background-image: url(../assets/ym-member/shop/LOGO2.png);
          background-repeat: no-repeat;
          background-position: left;
          &:hover{
            background-image: url(../assets/ym-member/shop/LOGO-hover2.png);
            color: #f29600;
          }
        }
        &:nth-child(4) {
          background-image: url(../assets/ym-member/shop/LOGO3.png);
          background-repeat: no-repeat;
          background-position: left;
          &:hover{
            background-image: url(../assets/ym-member/shop/LOGO-hover3.png);
            color: #f29600;
          }
        }
        &:nth-child(5) {
          background-image: url(../assets/ym-member/shop/LOGO4.png);
          background-repeat: no-repeat;
          background-position: left;
          &:hover{
            background-image: url(../assets/ym-member/shop/LOGO-hover4.png);
            color: #f29600;
          }
        }
        &:nth-child(6) {
          background-image: url(../assets/ym-member/shop/LOGO5.png);
          background-repeat: no-repeat;
          background-position: left;
          &:hover{
            background-image: url(../assets/ym-member/shop/LOGO-hover5.png);
            color: #f29600;
          }
        }
        &:nth-child(7) {
          background-image: url(../assets/ym-member/shop/LOGO6.png);
          background-repeat: no-repeat;
          background-position: left;
          &:hover{
            background-image: url(../assets/ym-member/shop/LOGO-hover6.png);
            color: #f29600;
          }
        }
        &:nth-child(8) {
          margin-left: 410px;
          span{
            color: #f29600;
            font-weight: bold;
            font-size: 18px;
          }
        }
      }

    }
    .paging {
      width: 1200px;
      height: 35px;
      margin: 23px auto;
      text-align: center;
    }
  }

</style>
